<template>
  <canvas id="galaxy-bg" class="fixed top-0 left-0 w-full h-full z-0 pointer-events-none"></canvas>
  <div class="flex flex-col min-h-screen">
    <!-- 头部导航 -->
    <Header />

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-12 rounded-xl shadow-lg mt-8"
      style="background: rgba(20, 24, 40, 0.12); backdrop-filter: blur(1px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); box-shadow: 0 4px 32px #0002;">
      <router-view />
    </main>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
let animationId;

function randomBetween(a, b) {
  return a + Math.random() * (b - a);
}

const nebulaState = { flag: false };

function drawGalaxy(ctx, width, height, stars, comet) {
  ctx.clearRect(0, 0, width, height);
  // 绘制星星
  for (const star of stars) {
    ctx.save();
    ctx.globalAlpha = star.alpha;
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, 2 * Math.PI);
    ctx.fillStyle = star.color;
    ctx.shadowColor = star.color;
    ctx.shadowBlur = star.blur;
    ctx.fill();
    ctx.restore();
  }
  // 绘制彗星及尾巴
  if (comet && comet.active) {
    // 绘制尾巴
    for (let i = comet.tail.length - 1; i > 0; i--) {
      const p1 = comet.tail[i];
      const p2 = comet.tail[i - 1];
      ctx.save();
      const grad = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
      grad.addColorStop(0, `rgba(255,255,255,${0.15 * (i / comet.tail.length)})`);
      grad.addColorStop(1, `rgba(120,180,255,0)`);
      ctx.strokeStyle = grad;
      ctx.lineWidth = Math.max(2, comet.radius * (i / comet.tail.length));
      ctx.beginPath();
      ctx.moveTo(p1.x, p1.y);
      ctx.lineTo(p2.x, p2.y);
      ctx.stroke();
      ctx.restore();
    }
    // 彗星本体
    ctx.save();
    ctx.globalAlpha = comet.alpha;
    ctx.beginPath();
    ctx.arc(comet.x, comet.y, comet.radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(255,255,255,1)';
    ctx.shadowColor = 'rgba(120,180,255,1)';
    ctx.shadowBlur = 60;
    ctx.fill();
    ctx.restore();
  }
}

onMounted(() => {
  const canvas = document.getElementById('galaxy-bg');
  const ctx = canvas.getContext('2d');
  let width = window.innerWidth;
  let height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;



  // 生成分层星星
  const stars = [];
  // 远层（小、淡、模糊）
  for (let i = 0; i < 200; i++) {
    const angle = randomBetween(-Math.PI / 3, Math.PI / 3);
    const r = randomBetween(width / 7, width / 2.1);
    const x = width / 2 + Math.cos(angle) * r + randomBetween(-60, 60);
    const y = height / 2 + Math.sin(angle) * r / 3 + randomBetween(-40, 40);
    stars.push({
      x: Math.random() < 0.7 ? x : randomBetween(0, width),
      y: Math.random() < 0.7 ? y : randomBetween(0, height),
      radius: randomBetween(0.2, 0.7),
      alpha: randomBetween(0.15, 0.5),
      color: `rgba(${Math.floor(randomBetween(200, 255))},${Math.floor(randomBetween(200, 255))},${Math.floor(randomBetween(220, 255))},1)`,
      blur: randomBetween(2, 8),
      speed: randomBetween(0.01, 0.03),
      angle: randomBetween(0, 2 * Math.PI)
    });
  }
  // 近层（大、亮、锐利）
  for (let i = 0; i < 120; i++) {
    const angle = randomBetween(-Math.PI / 3, Math.PI / 3);
    const r = randomBetween(width / 6, width / 2.2);
    const x = width / 2 + Math.cos(angle) * r + randomBetween(-30, 30);
    const y = height / 2 + Math.sin(angle) * r / 3 + randomBetween(-20, 20);
    stars.push({
      x: Math.random() < 0.7 ? x : randomBetween(0, width),
      y: Math.random() < 0.7 ? y : randomBetween(0, height),
      radius: randomBetween(0.7, 1.7),
      alpha: randomBetween(0.5, 1),
      color: `rgba(${Math.floor(randomBetween(220, 255))},${Math.floor(randomBetween(220, 255))},${Math.floor(randomBetween(240, 255))},1)`,
      blur: randomBetween(4, 14),
      speed: randomBetween(0.02, 0.06),
      angle: randomBetween(0, 2 * Math.PI)
    });
  }
  // 彩色星星点缀
  for (let i = 0; i < 20; i++) {
    const colors = [
      'rgba(120,180,255,1)',
      'rgba(180,120,255,1)',
      'rgba(255,200,120,1)',
      'rgba(255,120,180,1)'
    ];
    const color = colors[Math.floor(Math.random() * colors.length)];
    stars.push({
      x: randomBetween(0, width),
      y: randomBetween(0, height),
      radius: randomBetween(1.2, 2.2),
      alpha: randomBetween(0.7, 1),
      color,
      blur: randomBetween(8, 18),
      speed: randomBetween(0.01, 0.04),
      angle: randomBetween(0, 2 * Math.PI)
    });
  }

  // 彗星状态
  let comet = {
    active: false,
    x: 0,
    y: 0,
    vx: 0,
    vy: 0,
    radius: 0,
    angle: 0,
    alpha: 1,
    tail: []
  };

  function launchComet() {
    comet.active = true;
    comet.radius = randomBetween(1, 4); // 彗星更大
    comet.angle = randomBetween(Math.PI / 6, Math.PI / 3); // 30~60度
    comet.x = randomBetween(width * 0.2, width * 0.8);
    comet.y = randomBetween(height * 0.1, height * 0.4);
    const speed = randomBetween(8, 12);
    comet.vx = Math.cos(comet.angle) * speed;
    comet.vy = Math.sin(comet.angle) * speed;
    comet.alpha = 1;
    comet.tail = [];

    // 2~5秒后再次触发
    setTimeout(() => {
      comet.active = false;
      setTimeout(launchComet, randomBetween(3000, 10000));
    }, randomBetween(900, 1400)); // 彗星持续时间更长
  }
  // 初始延迟
  setTimeout(launchComet, randomBetween(2000, 5000));

  function animate() {
    for (const star of stars) {
      // 星星闪烁
      star.alpha += randomBetween(-0.01, 0.01);
      if (star.alpha < 0.1) star.alpha = 0.1;
      if (star.alpha > 1) star.alpha = 1;
      // 部分星星缓慢移动
      if (star.speed) {
        star.angle += star.speed * 0.01;
        star.x += Math.cos(star.angle) * star.speed;
        star.y += Math.sin(star.angle) * star.speed * 0.5;
        // 边界回环
        if (star.x < 0) star.x = width;
        if (star.x > width) star.x = 0;
        if (star.y < 0) star.y = height;
        if (star.y > height) star.y = 0;
      }
    }
    // 彗星运动与尾巴
    if (comet.active) {
      comet.x += comet.vx;
      comet.y += comet.vy;
      comet.alpha *= 0.985;
      // 尾巴轨迹
      comet.tail.push({ x: comet.x, y: comet.y });
      if (comet.tail.length > 40) comet.tail.shift();
    }
    drawGalaxy(ctx, width, height, stars, comet);
    animationId = requestAnimationFrame(animate);
  }
  animate();

  function resize() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    drawGalaxy(ctx, width, height, stars, comet);
  }
  window.addEventListener('resize', resize);

  onBeforeUnmount(() => {
    cancelAnimationFrame(animationId);
    window.removeEventListener('resize', resize);
  });
});
</script>

<style scoped>
/* 全局布局样式 */
.container {
  max-width: 1200px;
}

#galaxy-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: #0a0a1a;
}
</style>
